<template>
  <TablePage>
    <template #top>
      <div class="font-semibold text-5.7 pb-4.5 text-color-header"> 换班管理 </div>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }">
        <a-image
          v-if="column.dataIndex === 'face'"
          :src="record.face || DEFAULT_IMG_BASE64_STR"
          :fallback="DEFAULT_IMG_BASE64_STR"
          :width="record.face ? 100 : 50"
          :preview="!!record.face"
        ></a-image>
        <TypeTag
          v-else-if="column.dataIndex === 'type'"
          :type-detail="record.type || record.type === 0 ? ShiftTypeDetail[record.type] : undefined"
        />
      </template>
    </SlTable>
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { handleDateRowRender } from "/@/utils/common";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/main/statisticalReport";
import { ShiftItem, ShiftType, ShiftTypeDetail } from "/@/api/main/statisticalReport/models";
import type { BodyCellOptions } from "/@/types/antd";
import { LabelSelectType } from "/@/types/components";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";

const columns = ref<TableProps<ShiftItem>["columns"]>([
  {
    title: "收费员ID",
    dataIndex: "userId",
  },
  {
    title: "收费员名称",
    dataIndex: "userName",
  },
  {
    title: "人脸",
    dataIndex: "face",
  },
  {
    title: "类型",
    dataIndex: "type",
  },
  {
    title: "发生时间",
    dataIndex: "createTime",
    customRender: handleDateRowRender,
  },
]);

const { pagination, tableData, tableLoading, reloadTable } = useCURD<ShiftItem>({
  getPageUrl: Api.shiftChanges,
});
</script>
